<template>
	<view class="page">
		<!-- 地址 -->
		<view class="address-data">
			<view class="address-list" @click="onSkip('address')">
				<view class="list">
					<text>{{address.address}}</text>
				</view>
				<view class="list">
					<text class="address">{{address.detailed_address}}</text>
				</view>
				<view class="list">
					<text>{{address.name}}</text>
					<text>{{address.phone}}</text>
				</view>
				<view class="list">
					<text class="tips">(如果快递不方便接收，您可以选择暂时寄存服务)</text>
				</view>
			</view>
			<view class="bar">

			</view>
		</view>
		<!-- 商品 -->
		<view class="goods-data">
			<view class="goods-title">
				<text>商品信息</text>
			</view>
			<view class="goods-list">
				<view class="list" v-for="(item,index) in goodsData" :key="index">
					<view class="thumb">
						<image :src="item.skuu.sku_image" mode=""></image>
					</view>
					<view class="item">
						<view class="title">
							<text class="name one-omit">{{item.goods_name}}</text>
							<text class="attr">{{item.skuu.attr_values}}</text>
						</view>
						<view class="price-number">
							<view class="price">
								<text class="min">￥</text>
								<text class="max">{{price}}</text>
							</view>
							<view class="number">
								<text>x {{num}}</text>
							</view>
						</view>
						<view class="tag">
							<text>支持七天无理由退货</text>
						</view>
					</view>
				</view>
			</view>
			<view class="delivery">
				<div class="list">
					<view class="title">配送</view>
					<view class="content">
						<text>快递运输</text>
						<text class="iconfont icon-more"></text>
					</view>
				</div>
				<div class="list">
					<view class="title">运费险</view>
					<view class="content">
						<text>￥10.00</text>
						<text class="iconfont icon-check" :class="{'icon-checked':is_freight}"
							@click="freight()"></text>
					</view>
				</div>
				<div class="list">
					<view class="title">留言</view>
					<view class="content">
						<input type="text" placeholder="选填,建议先和商家沟通确认">
					</view>
				</div>
			</view>
		</view>
		<!-- 优惠 -->
		<view class="discounts-data">
			<view class="discounts">
				<div class="list" @click="$refs['InvoiceInfo'].show()">
					<view class="title">发票</view>
					<view class="content">
						<text>不开发票</text>
						<text class="iconfont icon-more"></text>
					</view>
				</div>
				<view class="list" @click="$refs['UseCoupon'].show()">
					<view class="title">优惠券</view>
					<view class="content">
						<view v-for="(item,index) in coupons" class="coupon-list">
							<view>{{item.title}}</view>
						</view>
					</view>
					<view class="more">
						<text class="iconfont icon-more"></text>
					</view>
				</view>
				<div class="list">
					<view class="title">积分</view>
					<view class="content">
						<text>共300，满1000可用</text>
						<!-- <text class="iconfont icon-more"></text> -->
					</view>
				</div>
			</view>
		</view>
		<!-- 订单金额 -->
		<view class="order-price">
			<view class="price-list">
				<view class="list">
					<view class="title">
						<text>商品金额</text>
					</view>
					<view class="price">
						<text>￥{{price}}.00</text>
					</view>
				</view>
				<view class="list">
					<view class="title">
						<text>运费</text>
					</view>
					<view class="price">
						<text class="highlight">+￥0.00</text>
					</view>
				</view>
				<view class="list">
					<view class="title">
						<text>运费险</text>
					</view>
					<view class="price">
						<text class="highlight" v-if="is_freight">+￥10.00</text>
						<text class="highlight" v-else>+￥0.00</text>
					</view>
				</view>
			</view>
		</view>
		<!-- 底部合计提交 -->
		<view class="footer-submit">
			<view class="price">
				<text class="min">￥</text>
				<text class="max">{{totalPrice}}</text>
				<text class="min">.00</text>
			</view>
			<view class="submit" @click="onSubmit">
				<text>提交订单</text>
			</view>
		</view>
		<!-- 发票 -->
		<invoice-info ref="InvoiceInfo"></invoice-info>
		<!-- 优惠券 -->
		<use-coupon :sku="goods_ids" :price="price" v-on:childByValue="childByValue" ref="UseCoupon"></use-coupon>
	</view>
</template>

<script>
	import InvoiceInfo from '../../components/InvoiceInfo/InvoiceInfo.vue';
	import UseCoupon from '../../components/UseCoupon/UseCoupon.vue'
	export default {
		components: {
			// 发票
			InvoiceInfo,
			// 优惠券
			UseCoupon,
		},
		data() {
			return {
				scrollTop: 0,
				goodsData: [],
				price: 0,
				is_freight: 0,
				skuId: '',
				address: {},
				goods_ids: "",
				//商品抢购类型   [1:普通购买(默认) 2:拼团购买 3:秒杀购买 4:砍价购买 5:拼团单独购买]
				order_type_code: 1,
				coupons: [],
				num: 0,
				config_id:0,
				bargain_id: 0,
			};
		},
		onLoad(params) {
			
			//商品抢购类型   [1:普通购买 2:拼团购买 3:秒杀购买 4:砍价购买 5:拼团单独购买]
			if (params.order_type_code ) {
				this.order_type_code = params.order_type_code;
				if(params.order_type_code == 3){
					this.$http.get('seckill/detail', {
						sku_id: params.skuIds,
						seckill_id:params.seckill_id
					}, {}).then(res => {
						console.log(res.data.data[0])
						this.price = res.data.data[0].price
						this.config_id = res.data.data[0].config_id
					})
				}else if(params.order_type_code == 4) {
					this.price = params.totalPrice
					this.bargain_id = params.bargain_id
				}
			}
			var totalPrice = params.totalPrice
			this.price = totalPrice
			this.num = params.num
			var skuIds = params.skuIds;
			this.skuId = skuIds
			var aid = params.addId
			this.$http.get('user/default/address', {}, {}).then(res => {
				console.log(res.data)
				this.address = res.data
			})
			if (aid != undefined) {
				this.$http.get('user/addressByDetail', {
					eid: aid
				}, {}).then(res => {
					// console.log(res.data.data)
					this.address = res.data.data
				})
			}
			this.$http.get('store/skuById', {
				sku_id: skuIds
			}, {}).then(res => {
				console.log(res.data.data)
				this.goodsData = res.data.data
			})
			
			
		},
		computed: {
			totalPrice: function() {
				return this.price;
			}
		},
		onPageScroll(e) {
			this.scrollTop = e.scrollTop;
		},
		methods: {
			childByValue: function(childValue) {
				// childValue就是子组件传过来的值
				console.log(childValue)
				this.$http.get('store/getCoupon', {
					coupon_id: childValue
				}, {}).then(res => {
					console.log(res.data.data)
					var old_coupons = this.coupons
					if (old_coupons.length > 1) {
						uni.showToast({
							title: "只能使用一张优惠券！！！"
						})
						return;
					}
					// for (let coupon of old_coupons) {
					// 	if (coupon.id == childValue) {
					// 		uni.showToast({
					// 			title: "不得重复使用同一张"
					// 		})
					// 		return;
					// 	}
					// 	if (coupon.type == res.data.data.type) {
					// 		uni.showToast({
					// 			title: "同类型不得重复使用"
					// 		})
					// 		return;
					// 	}
					// }
					var price = this.price
					price = price - res.data.data.coupon_price
					this.price = price
					this.coupons.push(res.data.data)
				})
			},
			freight() {
				var price = this.price
				var flag = this.is_freight
				if (flag == 0) {
					flag = 1
					price = parseFloat(price) + parseFloat(10)
					this.price = price
				} else {
					flag = 0
					var price = this.price
					price = parseFloat(price) - parseFloat(10)
					this.price = price
				}
				this.is_freight = flag
			},
			/**
			 * 提交订单
			 */
			onSubmit() {
				var order_type_code = this.order_type_code;
				var skuIds = this.skuId;
				var addressId = this.address.id;
				var num = this.num
				var coupons = this.coupons
				var coupon_id = 0
				var bargain_id = this.bargain_id
				for (let coupon of coupons) {
					coupon_id = coupon.id;
				}
				if(this.order_type_code == 3){
					this.$http.post('order/create', {
						order_type_code: order_type_code,
						sku_id:this.skuId,
						num:this.num,
						address_id: addressId,
						seckill_id:this.config_id,
						postage_id: 1,
						pay_price:this.price,
						coupon_id: coupon_id,
						make: '',
					}, {}).then(res => {
						var order = res.data.data
						if (res.data.code == 200) {
							// console.log(1)
							uni.redirectTo({
								url: '/pages/CashierDesk/CashierDesk?order_id=' + order.order_no +
									"&pay_price=" + order.pay_price,
							})
						}
					});
					return
				}else if(this.order_type_code == 2){
					this.$http.post('pink/open', {
						order_type_code: order_type_code,
						sku_id:this.skuId,
						num:this.num,
						address_id: addressId,
						pink_id:1,
						postage_id: 1,
						pay_price:this.price,
						make: '',
					}, {}).then(res => {
						var order = res.data.data
						console.log(res)
						if (res.data.code == 200) {
							uni.redirectTo({
								url: '/pages/CashierDesk/CashierDesk?order_id=' + order.order_no +
									"&pay_price=" + order.pay_price,
							})
						}
					});
					return
				}else if(this.order_type_code == 5){
					this.$http.post('order/create', {
						order_type_code: order_type_code,
						sku_id:this.skuId,
						num:this.num,
						address_id: addressId,
						pink_id:1,
						postage_id: 1,
						pay_price:this.price,
						make: '',
					}, {}).then(res => {
						var order = res.data.data
						if (res.data.code == 200) {
							uni.redirectTo({
								url: '/pages/CashierDesk/CashierDesk?order_id=' + order.order_no +
									"&pay_price=" + order.pay_price,
							})
						}
					});
					return
				}
				if(this.order_type_code == 4){
					this.$http.post('order/create', {
						order_type_code: order_type_code,
						sku_id:this.skuId,
						num:this.num,
						address_id: addressId,
						bargain_id:this.bargain_id,
						postage_id: 1,
						pay_price:this.price,
						coupon_id: coupon_id,
						make: '',
					}, {}).then(res => {
						// console.log(res)
						console.log(res)
						var order = res.data.data
						if (res.data.code == 200) {
							// console.log(1)
							uni.redirectTo({
								url: '/pages/CashierDesk/CashierDesk?order_id=' + order.order_no +
									"&pay_price=" + order.pay_price,
							})
						}
					});
					return
				}
				this.$http.post('order/create', {
					order_type_code: order_type_code,
					sku_id:this.skuId,
					num:this.num,
					address_id: addressId,
					postage_id: 1,
					coupon_id: coupon_id,
					make: '',
				}, {}).then(res => {
					console.log(res)
					var order = res.data.data
					if (res.data.code == 200) {
						// console.log(1)
						uni.redirectTo({
							url: '/pages/CashierDesk/CashierDesk?order_id=' + order.order_no +
								"&pay_price=" + order.pay_price,
						})
					}

				});

			},
			/**
			 * 跳转点击
			 * @param {String} type 跳转类型
			 */
			onSkip(type) {
				switch (type) {
					case 'address':
						var skuids = this.skuId
						var price = this.price
						uni.navigateTo({
							url: '/pages/AddressList/AddressList?skuIds=' + skuids + "&totalPrice=" + price,
						})
						break;
				}
			}
		}
	}
</script>

<style scoped lang="scss">
	@import 'Order.scss';

	/* 优惠 */
	.list {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 4%;
		height: 100rpx;
		border-bottom: 2rpx solid #f6f6f6;

		.title {
			display: flex;
			align-items: center;
			width: 15%;
			height: 100%;
			font-size: 24rpx;
			color: #212121;
		}

		.content {
			display: flex;
			align-items: center;
			width: 80%;
			height: 100%;

			text {
				font-size: 24rpx;
				color: #555555;
			}

			.serve {
				display: flex;
				align-items: center;
				margin-right: 20rpx;

				text {
					font-size: 24rpx;
					color: #555555;
				}

				.iconfont {
					font-size: 26rpx;
					color: $base;
					margin-right: 10rpx;
				}
			}

			.coupon-list {
				position: relative;
				display: flex;
				align-items: center;
				// width: 100rpx;
				height: 30rpx;
				border: 2rpx solid $base;
				border-radius: 6rpx;
				margin-right: 20rpx;

				view {
					display: inline-block;
					padding: 0 5rpx;
					color: $base;
					font-size: 24rpx;
					transform: scale(0.8);
				}
			}

			.coupon-list:before {
				position: absolute;
				left: -10rpx;
				top: 50%;
				content: "";
				width: 12rpx;
				height: 12rpx;
				background-color: #fff;
				border-right: 2rpx solid $base;
				border-radius: 100%;
				transform: translate(0, -50%);
			}

			.coupon-list:after {
				position: absolute;
				right: -10rpx;
				top: 50%;
				content: "";
				width: 12rpx;
				height: 12rpx;
				background-color: #fff;
				border-left: 2rpx solid $base;
				border-radius: 100%;
				transform: translate(0, -50%);
			}
		}
	}
</style>
